<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 完成一个动画效果 
  @所有人 作业: 
   完成一个动画效果:一个宽高为50px*50px 的矩形方块,
   在一个宽1000px,高500px的区域内,
   以其左上角为起点,在区域内以'W'路线进行移动,
   无限循环。要求1000px*500px的区域居中显示-->
  <style>
    div.qwer {
      position: relative;
      left: 0px;
      top: 0px;
      width: 50px;
      height: 50px;
      background: rgb(44, 223, 74);
      animation-name: qwer;
      animation: qwer 5s infinite;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
     
    }


    @keyframes qwer {
      0% {
        top: 0px;
        left: 0px;
      }

      25% {
        top: 450px;
        left: 475px;
      }

      50% {
        top: 0px;
        left: 725px;
      }

      75% {
        top: 450px;
        left: 975px;
      }

      100% {
        top: 0px;
        left: 1450px;
      }

    }
  </style>

</head>

<body>
  <div class="qwer"></div>
</body>

</html>